<template>
  <div>
    <h1>树形控制</h1>
    <pre>
        组件名:el-tree
            data:树形数据绑定[]
            props:{
                label:'label',
                children:"children"
            }
            作用域插槽（默认）:替换el-tree显示的内容
               v-slot="{node,data}"
               node:当前项组件内使用的值
               data：当前点击项的数据

        需求：
           广东
             深圳
               宝安
                  石岩

    </pre>
    <el-card>
      <el-tree :data="list" :props="{ label: 'name', children: 'child' }">
        <template v-slot="{ data }">
          <div>
            {{ data.name }}------
            <el-button @click="btnClick(node, data)">查看数据</el-button>
          </div>
        </template>
      </el-tree>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          name: '广东',
          child: [
            {
              name: '深圳',
              child: [
                {
                  name: '宝安',
                  child: [
                    {
                      name: '石岩'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    btnClick(node, data) {
      console.log(node, data)
    }
  }
}
</script>
<style></style>
